<template>
  <div class="form-single-fragment" style="position: relative;">
    <div class="title">
      <h4>团队成员</h4>
      <el-button type="primary" size="mini" @click="setPeople" v-if="verifyStatus!=1">添加成员</el-button>
    </div>
    <div class="table_container">
      <el-table :data="tableDate" size="mini" style="width: 100%;" header-cell-class-name="table-header-gray">
        <el-table-column type="index" align="center" width="55" label="序号"></el-table-column>
        <el-table-column prop="showName" align="center" label="姓名"></el-table-column>
        <el-table-column prop="mobile" align="center" label="手机号"></el-table-column>
        <el-table-column prop="projectRoleName" align="center" label="项目角色"></el-table-column>
        <el-table-column prop="deptName" align="center" label="部门"></el-table-column>
        <el-table-column prop="postName" align="center" label="岗位"></el-table-column>
        <el-table-column label="操作" align="center" width="120" v-if="verifyStatus!=1">
          <template slot-scope="scope">
            <el-button type="text" @click="setroles(scope.row, scope.$index)">设置角色</el-button>
            <el-button type="text" @click="deleteUserDtoList(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px;">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="page_size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, prev, pager, next, sizes"
          :total="total"></el-pagination>
      </el-row>
    </div>
    <div class="annotation" v-if="setRolebox">
      <setRole ref="setRole" @getRole="getRole" v-model="setRolebox"></setRole>
    </div>
    <div class="annotation" v-if="selectPeoplebox">
      <selectPeople ref="selectPeople" @getPeople="getPeople" v-model="selectPeoplebox"></selectPeople>
    </div>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import setRole from '@/components/selector/setRole.vue';
import selectPeople from '@/components/selector/selectPeople.vue';
export default {
  name: 'Members',
  components: { setRole, selectPeople },
  data () {
    return {
      setRolebox: false,
      selectPeoplebox: false,
      loading: false,
      isShowloading: false,
      tableDate: [],
      tableIndex: '',
      verifyStatus: '',
      total: 0,
      page_size: 10,
      pageNo: 1
    };
  },
  created () {
  },
  mounted () {
    this.verifyStatus = this.$route.query.verifyStatus
    this.loadDetailWidgetData()
  },
  methods: {
    /**
     * 项目成员
     */
    loadDetailWidgetData () {
      let params = {
        projectId: this.$route.query.projectId,
        current: this.pageNo,
        size: this.page_size
      };
      return new Promise((resolve, reject) => {
        Administration.userlist(this, params).then(res => {
          this.tableDate = res.data.records
          this.total = res.data.total
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadDetailWidgetData()
    },
    handleSizeChange (val) {
      this.page_size = val
      this.loadDetailWidgetData()
    },
    currentChange (val) {
      this.pageNo = val
      this.loadDetailWidgetData()
    },
    /**
     * 新增成员
     */
    setPeople () {
      this.selectPeoplebox = true
      this.$nextTick(() => {
        this.$refs.selectPeople.info()
      })
    },
    getPeople (data) {
      let projectUserDtoList = []
      data.forEach(item => {
        item.projectRoleName = ''
        let userli = this.tableDate.find(items => {
          return item.userId === items.userId
        })
        if (!userli) {
          projectUserDtoList.push(item)
        }
      })
      let params = {
        projectUserAddDto: {
          projectId: this.$route.query.projectId,
          userDtoList: projectUserDtoList
        }
      };
      return new Promise((resolve, reject) => {
        Administration.useradd(this, params).then(res => {
          this.loadDetailWidgetData()
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 设置角色
     */
    setroles (data, index) {
      this.tableIndex = index
      this.setRolebox = true
      this.$nextTick(() => {
        this.$refs.setRole.info()
      })
    },
    getRole (data) {
      let index = this.tableIndex
      let params = {
        projectUserRoleAddDto: {
          id: this.tableDate[index].id,
          projectRoleName: data.projectRoleName
        }
      };
      return new Promise((resolve, reject) => {
        Administration.setRoleName(this, params).then(res => {
          this.loadDetailWidgetData()
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 删除成员
    deleteUserDtoList (row) {
      let params = {
        id: row.id
      };
      return new Promise((resolve, reject) => {
        Administration.userdelete(this, params).then(res => {
          this.loadDetailWidgetData()
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 查看
    handleInfo (data) {
      this.$router.push({path: '/TasksaddDetail', query: {TasksId: data.id}})
    }
  }
}
</script>

<style lang="scss" scoped>
h3{border-bottom: 1px solid #E9E9EB;padding: 0 0 10px;}
.table_container{margin: 10px 0;}
.form-single-info{display: flex;justify-content: center;}
.title{
  display: flex;align-items: center;justify-content: space-between;
  h4{font-weight: bold;}
}
.Taskslist{
  box-shadow: 0px 0px 7px 0px rgba(77, 165, 255, 0.3);border-radius: 0px 0px 4px 4px;padding: 10px 20px;
  display: flex;align-items: center;justify-content: space-between;
  h4{padding: 0;margin: 10px 0;font-weight: bold;}
  span{display: block;color: #409EFF;margin: 10px 0;}
  .color-text1{color: #F56C6C;}
  .color-text2{color: #C0C4CC;}
  .listimg{width: 60px;height: 60px;border-radius: 100%;overflow: hidden;}
  .listimg .el-image{width: 100%;height: 100%;}
}
</style>
